<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0044)http://demo.demohuo.top/modals/67/6769/demo/ -->

<title>图书管理系统</title>

<link rel="stylesheet" type="text/css" href="/static/default.css">

<link href="/static/index.css" rel="stylesheet">

<link href="/static/iconfont.css" rel="stylesheet">

<style>
    .box1 {
        width: 455px;
    }

    #boxer {

        height: 100%;
        position: relative;
    {#overflow: hidden;#} background-size: cover;
    }

    .youxiang-img {
        height: 27px;
        width: 27px;
        position: absolute;
        top: 11px;
        left: 4px;
    }

    .middle_right {
        width: 440px;
        height: 629px;
        float: right;
        background: #fff;
    }


</style>
</head>
<body style="height:100%;">

<div class="boxer1" id="boxer">
    <h2 class="logo"></h2>
    <div class="box1">


        <div class="middle_right">
            <div class="mr_box">
                <h2>用户注册</h2>

                <form action="">
                    {% csrf_token %}
                    <div class="form-group">
                        <span class="iconfont icon-Profe icon_"><img src="/static/user.svg" alt="" class="youxiang-img"></span>
                        <input type="text" class="form-control icon-user" id="user" placeholder="用户名" name="user">
                        <p></p>
                    </div>
                    <div class="form-group mar_b">
                        <span class="iconfont icon-Unl icon_"><img src="/static/mima.svg" alt="" class="youxiang-img"></span>
                        <input type="password" class="form-control icon-pass" id="pwd" placeholder="密码" name="pwd">
                        <p></p>
                    </div>
                    <div class="form-group mar_b">
                        <span class="iconfont icon-Unlo icon_"><img src="/static/mima.svg" alt="" class="youxiang-img"></span>
                        <input type="password" class="form-control icon-pass" id="re_pwd" placeholder="确认密码"
                               name="re_pwd">
                        <p></p>
                    </div>
                    <div class="form-group mar_b">
                        <span class=" "><img src="/static/youxiang.svg" alt="" class="youxiang-img"></span>
                        <input type="text" class="form-control icon-pass" id="email" placeholder="邮箱" name="email">
                        <p></p>
                    </div>


                    <button type="button" class="login">立即注册</button>
                </form>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    $(".login").click(function () {
        $.ajax({
            url: "/register/", //请求url 需要配置响应的视图函数
            type: "post",//请求方法
            data: {
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                user: $("#user").val(),
                pwd: $("#pwd").val(),
                re_pwd: $("#re_pwd").val(),
                email: $("#email").val()
            },
            success: function (data) { //回调函数，后端返回回来的数据
                if  (data['msg']){
                     $.each(data['msg'], function (i, d) {
                    console.log(i, d)
                    $("#" + i).next().html(d).css("color", "red")
                    if (i == '__all__') {
                        $("#re_pwd").next().html(d).css("color", "red")

                    }
                    setTimeout(function () {
                        $(".form-group").children("p").html("")
                    }, 1000)

                })
                }else {
                    alert("注册成功，去登录吧！")
                    location.href = "/login/"
                }


            }
        })
    })
</script>

</body>
</html>